<template>
  <div>
    <span :style="{ color: '#ff0000' }">
      Table组件使用&lt; el-table &gt;标签定义，在该标签中绑定data对象数组后，
      <br />
      在&lt; el-table-column
      &gt;中使用prop属性对应对象中的键名，即可将数据添加到表格中；
      使用label属性可以定义表格的列名，使用width属性可以定义表格的宽高。
    </span>
    <hr />
    <el-table :data="tableData" stripe border style="width: 100%">
      <el-table-column prop="date" label="日期" width="180" />
      <el-table-column prop="name" label="姓名" width="180" />
      <el-table-column prop="address" label="住址" width="300" />
    </el-table>

    <hr />
    <el-button round> round 是否为圆角按钮，默认值为false </el-button>
    <el-button type="primary" round>主要按钮</el-button>
    <el-button type="success" round>成功按钮</el-button>
    <el-button type="info" round>一般提示信息按钮</el-button>
    <el-button type="warning" round>警告按钮</el-button>
    <el-button type="danger" round>危险按钮</el-button>

    <hr />
    <el-table
      ref="singleTable"
      :data="tableData2"
      highlight-current-row
      @current-change="handleCurrentChange"
      style="width: 100%"
    >
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column property="date" label="日期" width="120">
      </el-table-column>
      <el-table-column property="name" label="姓名" width="120">
      </el-table-column>
      <el-table-column property="address" label="地址"> </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-button @click="setCurrent(tableData2[1])">选中第二行</el-button>
      <el-button @click="setCurrent()">取消选择</el-button>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref ,} from "vue";

const tableData = [
  { date: "2023-02-03", name: "张三", address: "北京市海淀区" },
  { date: "2023-02-04", name: "李四", address: "北京市海淀区" },
  { date: "2023-02-05", name: "王五", address: "北京市海淀区" },
];

const tableData2 = [
  {
    date: "2016-05-02",
    name: "王小虎",
    address: "上海市普陀区金沙江路 1518 弄",
  },
  {
    date: "2016-05-04",
    name: "王小虎",
    address: "上海市普陀区金沙江路 1517 弄",
  },
  {
    date: "2016-05-01",
    name: "王小虎",
    address: "上海市普陀区金沙江路 1519 弄",
  },
  {
    date: "2016-05-03",
    name: "王小虎",
    address: "上海市普陀区金沙江路 1516 弄",
  },
];
let currentRow = ref({});
let singleTable = ref({});

function setCurrent(row) {
  console.log({row});
  console.log(1);
  //在vue3 setup 中 不在使用 this.$refs
  singleTable.value.setCurrentRow(row);
}
function handleCurrentChange(val) {
  console.log({val});
  console.log(2);
  currentRow = val;
}
</script>

<style>
</style>